<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>d</title>
    <script>
        /*row  表示主轴为水平方向*/
        /*column 表示主轴为垂直方向*/
        /*flex-direction: column;*/

        /*主轴上的对齐方式在主轴的对齐方式 有 space-around space-between*/
        /*justify-content: center;*/
        /*justify-content: center;*/

        /*在交叉轴上的对齐方式 单行*/
        /*align-items: center; */
        /*align-items: center;*/

        /*是否换行*/
        /*flex-wrap: wrap;*/
        /*flex-wrap: nowrap;*/
        /*align-items: center;*/
        /*交叉轴的多行对齐方式  有 space-around space-between*/
        /*align-content: space-evenly;*/
        /*align-items: center;*/

        /*flex: 1  第四十剩余空间  1 表示把剩余空间都分完（只有一个项目需要分配）*/

        /* align-items: flex-end; 控制某一项目在交叉轴上的对齐方式 */
        /*  order: -1; 默认是0 -1比0小所以提到前面 */
    </script>
</head>

<style>
    .box {
        display: flex;
        width: 80%;
        height: 300px;
        background: pink;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .a {
        width: 150px;
        height: 200px;
        background: purple;
    }
    
    span:nth-child(3) {
        background: red;
        align-self: flex-end;
        order: -1;
    }
</style>

<body>
    <div class="box">
        <span class="a pox">李白</span>
        <span class="a pox">小号</span>
        <span class="a pox">大号</span>

    </div>

</body>

</html>